<template>
  <el-card v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="6" class="f-row ai-c ws-n">
        <div class="txt mr-1">关键字</div>
        <div class="input-txt">
          <el-input
            placeholder="请输入处方名称或编号"
            v-model="keyword"
          ></el-input>
        </div>
      </el-col>
      <el-col :span="9" class="f-row ai-c ws-n">
        <div class="txt mr-1">创建时间</div>
        <div class="input-time">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </el-col>
      <div class="btn serbtn cp" @click="serachBtn">搜索</div>
    </el-row>
    <el-row>
      <div
        class="btn add-btn mr-1 cp"
        @click="$router.push('/editPrescription')"
      >
        添加处方
      </div>
      <div class="btn cp" @click="del_more">批量删除</div>
    </el-row>
    <tableAssembly
      :hasSelect="true"
      :data="dataList"
      :columns="columnsList"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handlechange"
    >
    </tableAssembly>
    <detailDialog :dialogVisible="dialogVisible"></detailDialog>
  </el-card>
</template>
<script>
import { prescription_api, del_prescription } from "@/request/api";
import detailDialog from "@/components/prescription/prescriptionDetail.vue";
import tableAssembly from "@/components/common/tabbleAssembly.vue";
import Bus from "@/utils/bus";
export default {
  components: {
    tableAssembly,
    detailDialog,
  },

  data() {
    return {
      multipleSelection: [], //勾选的数组
      date: null,
      keyword: "", //关键词
      satrt: null,
      end: null,
      dialogVisible: false, //处方详情
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 20,
        pageSizes: [10, 20],
      },
      // 表单数据
      dataList: [],
      // 表头数据
      columnsList: [
        {
          type: "index",
          width: "50",
          label: "序号",
        },
        {
          prop: "name",
          label: "处方名称",
          width: "250",
        },
        {
          prop: "id",
          label: "处方编号",
          width: "220",
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: "250",
        },
        {
          prop: "handle",
          label: "操作",
          fixed: "right",
          render: (m) => {
            return (
              <div>
                <span
                  onClick={this.prescriptionEdit.bind(this, m)}
                  class="btn-deep btn-edit cp"
                >
                  编辑
                </span>
                <span
                  onClick={this.prescriptionDetail.bind(this, m)}
                  class="btn-deep dt-clr cp"
                >
                  详情
                </span>
                <span
                  onClick={this.prescriptionDel.bind(this, m.id)}
                  class="btn-deep dp-ib cp"
                >
                  删除
                </span>
              </div>
            );
          },
        },
      ],
    };
  },
  created() {
    Bus.$on("closeDialog", () => {
      this.dialogVisible = false;
    });
    this.getdata();
  },
  methods: {
    serachBtn() {
      this.pagination.page = 1;
      this.getdata();
    },
    getdata() {
      if (this.date) {
        this.satrt = this.date[0];
        this.end = this.date[1];
      }
      this.loading=true
      prescription_api({
        page: this.pagination.page,
        rows: this.pagination.rows,
        keyword: this.keyword,
        satrt: this.satrt,
        end: this.end,
      })
        .then((res) => {
               this.loading=false
          this.pagination.total = Number(res.result.total);
          this.dataList = res.result.rows;
        })
        .catch((err) => {
             this.loading=false
          console.log(err, "处方列表失败");
        });
    },
    //编辑处方
    prescriptionEdit(e) {
      this.$router.push({
        name: "editPrescription",
        params: {
          ...e,
        },
      });
    },
    //处方详情
    prescriptionDetail(m) {
      Bus.$emit("showDetail", m);
      this.dialogVisible = true;
    },
    //删除
    prescriptionDel(i) {
         this.loading=true
      del_prescription(i).then((res) => {
           this.loading=false
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getdata();
        } else {
          this.$message.error("删除失败，请重试！");
        }
      }).catch(err=>{
            this.loading=false
      });
    },
    //批量删除
    del_more() {
      this.$confirm("此操作将批量删除处方文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = this.multipleSelection.map((i) => i.id).toString();
             this.loading=true
          del_prescription(ids).then((res) => {
               this.loading=false
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getdata();
            } else {
              this.$message.error("删除失败，请重试！");
            }
          }).catch(err=>{
                 this.loading=false
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
    },

    //勾选
    handlechange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="less" scoped>
.serbtn {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 1.56rem !important;
}
.btn-edit {
  background: #fbad3f !important;
}
.dt-clr {
  background: #68cabe !important;
}
.add-btn {
  background: var(--yellowCOlor) !important;
}
.btn {
  padding: 0.625rem 1.5625rem;
  background: var(--themeCOlor);
  border-radius: 0.25rem;
  text-align: center;
  display: inline-block;
  color: #fff;
}
.txt {
  font-size: 0.875rem;
  color: #333333;
}
.input-txt {
  flex: 1;
}
.input-time {
  flex: 1;
  .el-date-editor--timerange.el-input__inner {
    width: 100%;
  }
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>